<div>
	<table class="layui-hide" id="tblRecord" lay-filter="tblRecord"></table>
</div>
<script type="text/html" id="barRecord">
  <a class="layui-btn " lay-event="add">新增</a>
  <a class="layui-btn layui-btn-warm" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger " lay-event="del">删除</a>
  <div class="" style="float:right;width: 40%;">
  <input type="text" id="txtCusNo" style="
			display: inline ; 
			height:38px; 
			width: 55%; 
			font-size: 14px;"  placeholder="请输入客户编号" >
  <a class="layui-btn " id="btnSearch" lay-event="search"
  style="
	height: 38px; 
	line-height: 38px; 
	padding: 0 18px; 
	font-size:14px">按客户编号查询</a></div>
</script>

<script>
	var row = null
	var table
	layui.use('table', function(){
		table = layui.table;
		var $ = layui.jquery;
		
		table.render({
			elem:'#tblRecord', //指定渲染的table标签id名
			url:'http://localhost:8080/record/getCustomerRecord', //获取数据url地址
			cols:[[
				{checkbox:true},
				{field:'reNo', width:150, title:'交往记录编号', sort:true},
				{field:'cusNo',width:110, title:'客户编号', sort:true},
				{field:'cusName',width: 120,title: '客户名称',sort: true},
				{field:'reDate',width:120,title:'交往日期'}, //{属性名1：属性值1，属性名2：属性值2}
				{field:'reSite', title:'地点'},
				{field:'reOutline', title:'概要'},
				{field:'reDetail', title:'详细信息'},
				{field:'reRemark', title:'备注信息'},
			]],
			page:true ,//允许显示分页工具栏
			height:'full-160',
			limit:5,
			limits:[5, 10 ,15 ,20 ,25 ,30],
			toolbar:'#barRecord',//设置表格工具栏
			defaultToolbar:[] //设置是否有默认工具栏
		});
		
		table.on('toolbar(tblRecord)', function(obj){
		  var checkStatus = table.checkStatus(obj.config.id);
		  
		  //obj.event对应工具栏按钮的lay-event属性
		  switch(obj.event){
		    case 'add':
			    layer.open({
			          type: 2 //此处以iframe举例
			          ,title: '新增交往记录'
			          ,area: ['400px', '490px']
			          ,shade: 0.3 //弹出窗口灯箱效果
			          ,maxmin: true //显示最大化/最小化按钮
			          ,offset: [ //弹出窗口居中显示
			            ($(window).height()-490)/2
			            ,($(window).width()-400)/2
			          ] 
			          ,content: 'record/recordadd.html' //窗口连接
			        });
		    break;
		    case 'del':
		      if(checkStatus.data.length<=0){ //判断选中数组的长度，有选中才能修改
		      	layer.msg('请选择要删除的行')
		      }else{
				  layer.confirm('确认删除选中行吗?', function(index){
				    //do something
					var arrId = []
				    for(var i = 0; i<checkStatus.data.length; i++){
						var record = checkStatus.data[i]
						arrId.push(record.reNo)
					}
					$.ajax({
						url:'http://localhost:8080/record/delRecord',
						type:'POST',
						datatype:'JSON',
						data:{
							ids:arrId.join(',')
						},
						success:function(obj){
							table.reload('tblRecord',{
								page:{
									curr:1 //删除后跳转到第一页，避免最后一页全部删除出现空白
								}	
							})
							layer.msg(obj.msg)
						}
					})
				    layer.close(index);
				  });       
		      	}
		    break;
		    case 'edit':
			if(checkStatus.data.length<=0){ //判断选中数组的长度，有选中才能修改
				layer.msg('请选择要修改的行')
			}else{
				row = checkStatus.data[0]
		        layer.open({
		              type: 2 //此处以iframe举例
		              ,title: '修改交往记录'
		              ,area: ['400px', '490px']
		              ,shade: 0.3 //弹出窗口灯箱效果
		              ,maxmin: true //显示最大化/最小化按钮
		              ,offset: [ //弹出窗口居中显示
		                ($(window).height()-490)/2
		                ,($(window).width()-400)/2
		              ] 
		              ,content: 'record/recordupdate.html' //窗口连接
		            });
				}
		    break;
			case 'search':
			// $("#btnSearch").click(function(){  //查询表格信息
				var key = $("#txtCusNo").val()
				table.reload('tblRecord',{  //reload方法重新加载页
					where:{
						cusNo:key //查询条件
					},
					page:{
						curr:1 //重新从第一页开始
					}			
				})
			// )
			break;
		  };
		});	
	});
</script>
